<template>
    <div>
        <div class="x-content padding25 x-bottom-border" 
            v-for="(v,i) in listData" 
            :key="i" >
            <image class="x-image" :src="v.img"></image>
            <div class="x-info-div">
                <div class="x-info-start">
                    <text class="x-info-title">{{v.title}}</text>
                </div>
                <div class="x-info-last">
                    <text class="x-info-phone padding-bottom5">电话:{{v.phone}}</text>
                    <text class="x-info-phone">地址:{{v.address}}</text>
                </div>
            </div>
            <text class="x-range">{{v.range}}</text>
        </div>
    </div>
</template>
<script>
import asCore from "../../../../common/js/core";
export default {
    props: {
      listData: {
        type: Array,
        default: () => ([])
      }
    },
    data(){
        return {
            
        }
    },
    methods:{
        
    }
}
</script>
<style scoped>
.iconfont{
    font-family: iconfont;
}
.x-flex1{
    flex: 1;
}
.padding25{
    padding-left: 25px;
    padding-right: 25px;
}
.x-bottom-border {
    border-bottom-color: #dfdfdf;
    border-bottom-width: 1px;
}
.padding-bottom5 {
    padding-bottom: 5px;
}
.x-content {
    flex-direction: row;
    padding-top:20px;
    padding-bottom: 20px;
    background-color: #fff;
    position: relative;
}
.x-title {
    color: #151517;
    font-size:32px;
}
.x-type-text {
    color: #af0a28;
    font-size: 30px;
}
.x-image {
    height: 160px;
    width: 160px;
}
.x-info-div {
    flex: 1;
    position: relative;
    height: 160px;
}
.x-info-start {
    padding-left: 15px;
}
.x-info-last {
    flex: 1;
    position: absolute;
    bottom: 0px;
    padding-left: 15px;
}
.x-info-title {
    color: #1f1e24;
    font-size:34px;
}
.x-info-phone {
    color: #575562;
    font-size:28px;
}
.x-range {
    position: absolute;
    right: 20px;
    font-size:26px;
    color:#887147;
    top:80px;
}
</style>

